$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: SERVER_URL+"/department",
        async: true,
        dataType: "json",
        success: function (data) {
            if (data.code === 0){
                var str ="<div><select>"
                for(i=0;i<data.data.length;i++){
                    str +="<option value='"+data.data[i].departmentName+"'>"+data.data[i].departmentName+"</option>";
                }
                str +="</select></div>"
                $("#department").html(str)
            }else {
                confirm(data.msg);
            }
        }
    });

    $.ajax({
        type: "get",
        url: SERVER_URL+"/appointment/detail/"+sessionStorage.getItem("userEmail"),
        async: true,
        dataType: "json",
        success: function (data) {
            let str = '<tr>';
            for(i=0;i<data.data.length;i++){
                str += '<td>'+data.data[i].office+'</td><td>'+data.data[i].doctorName+'</td><td>'+data.data[i].dateTime+'</td><td>'+
                    '<a onclick="cancelAppointment('+data.data[i].appointmentId+')" class="btn btn-danger btn-icon-split">'+
                    '<span class="icon text-white-50"><i class="fas fa-trash"></i></span>'+
                    '<span class="text" style="color: white">Cancel&nbsp;</span></a></td>';
            }
            str += '</tr>';
            $("#appointmentResult").html(str)
        }
    });
})

function showDepartmentDtl(departmentInput) {
    $.ajax({
        type: "GET",
        url: SERVER_URL+"/department-dtl/"+departmentInput,
        async: true,
        dataType: "json",
        success: function (data) {
            if (data.code === 0){
                var str ="<div><select>"
                for(let i=0;i<data.data.length;i++){
                    str +="<option value='"+data.data[i].departmentDtlName+"'>"+data.data[i].departmentDtlName+"</option>";
                }
                str +="</select></div>"
                $("#office").html(str)
            }else {
                confirm(data.msg);
            }
        }
    });
}

function showDoctorCard(officeInput) {
    $.ajax({
        type: "GET",
        url: SERVER_URL+"/user/"+officeInput,
        async: true,
        dataType: "json",
        success: function (data) {
            var str = '';
            if(data.data.length !== 0){
                for(let i=0;i<data.data.length;i++){
                    str += '<div style="background-color:lavender;"><img src="../../img/PatientImg/HomePage-8.jpg" height="100" width="100"></div>'+
                        '<div class="card-body"><div class="card bg-primary text-white shadow">'+
                        '<div class="card-body" style="line-height: 5%">'+
                        'Name: <span class="text-white-50 small"> &#12288&#12288 '+data.data[i].firstName+'</span><span style="float: right"></span>'+
                        '</div></div><div class="card bg-info text-white shadow"><div class="card-body" style="line-height: 5%">'+
                        'Department: <span class="text-white-50 small"> &#12288 '+officeInput+'</span>'+
                        '</div></div><div class="card bg-success text-white shadow"><div class="card-body" style="line-height: 5%">'+
                        'Status: <span class="text-white-50 small"> &#12288&#12288 free</span></div></div></div>'+
                        '<button class="btn btn-primary" onclick="openwindow('+data.data[i].userId+')">Appoint</button>';
                    $("#doctorCard").html(str);
                }
            }else {
                $("#doctorCard").html(str);
            }
        }
    });
}

function cancelAppointment(Id) {
    $.ajax({
        type: "delete",
        url: SERVER_URL+"/appointment/"+Id,
        async: true,
        dataType: "json",
        success: function (data) {
            window.location.href="PSymptoms.html";
        }
    });
}

function makeAppointmentByDepartment(userId) {

    let dateTime = document.getElementById("dateTimeText").value;
    $.ajax({
        type: "post",
        url: SERVER_URL+"/appointment/doctor/"+userId+"/"+sessionStorage.getItem("userEmail")+"/"+dateTime,
        async: true,
        dataType: "json",
        success: function (data) {
            window.location.href="PDepartment.html";
        }
    });
}

function openwindow(userId){
    //获取弹窗得div
    var modal = document.getElementById('myModal');
    // 获取 <span> 元素，用于关闭弹窗 （X）
    var span = document.getElementsByClassName("close")[0];
    //获取弹窗中得确定按钮
    var ok=document.getElementsByClassName("ok")[0];
    //获取弹窗中得取消按钮
    var no=document.getElementsByClassName("no")[0];
    //窗体弹出
    modal.style.display = "block";
    //点击窗体ok
    ok.onclick=function(){
        //执行弹出窗体得确定后得操作
        alert("confirm to Make An Appointment");
        //关闭窗口
        makeAppointmentByDepartment(userId);
        modal.style.display = "none";
    }
    //点击窗体取消按钮
    no.onclick=function(){
        //直接关闭窗口
        modal.style.display = "none";
    }
    // 点击 <span> (x), 关闭弹窗
    span.onclick = function() {
        //直接关闭窗口
        modal.style.display = "none";
    }
    // 在用户点击其他地方时，关闭弹窗
    window.onclick = function(event) {
        //点击窗口外内容，关闭窗口
        if (event.target == modal) modal.style.display = "none";
    }
}